<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <button type="submit" id="butGet">查询学生信息</button>
  <button type="submit" id="butPost">增加学生信息</button>
  <button type="submit" id="butPut">修改学生信息</button>
  <button type="submit" id="butDelete">删除学生信息</button>
  <script>
    let obutGet = document.querySelector('#butGet')
    let obutPost = document.querySelector('#butPost')
    let obutPut = document.querySelector('#butPut')
    let obutDelete = document.querySelector('#butDelete')
    //get请求
    obutGet.onclick = async function () {
      try {
        //axios默认返回的是promise实列
        //await的返回值是promise实列的值
        const getvalue = await axios.get('/user', { //参数：第一个参数请求地址 第二个参数配置对象
          params: {
            userId: '001'
          }
        })
        console.log('getvalue', getvalue);
        console.log('getvalue.data', getvalue.data);
      } catch (e) {
        console.log(e.message);
      }
    }
    //post请求
    obutPost.onclick = async function () {
      try {
        //三个参数：第一个参数请求地址，第二个参数是 ，第三个参数可以不写
        const postvalue = await axios.post('/adduser', {
          userId: 1,
          name: 'li',
          age: 18
        })
        console.log('postvalue', postvalue);
      } catch (e) {
        console.log(e.message);
      }
    }

    //put请求 put请求和post是一样的
    obutPut.onclick = async function () {
      try {
        const putvalue = await axios.put('/putuser', {
          userId: 2,
          name: 'li',
          age: 18
        })
        console.log('putvalue', putvalue);
      } catch (e) {
        console.log(e.message);
      }
    }
    obutDelete.onclick = async function () {
      try {
        const deletevalue= await axios.delete('/deleteuser', {
          params: {
            userId: '001'
          }
        })
        console.log("deletevalue",deletevalue);
      } catch (e) {
        console.log(e.message);
      }
    }
  </script>
</body>

</html>